<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>s07-列表渲染</title>
		<script src="../vue.js"></script>
	</head>
	<body>
		<!-- 1 用 v-for 把一个数组对应为一组元素 -->
		<ul id="app1">
			<!-- 此处也可以使用 of 代替 in（更接近 JavaScript 迭代器的语法）：
				<li v-for="(item, index) of items"> -->
			<li v-for="(item, index) in items" :key="item.message">
				{{parentMessage}} - {{index}} - {{item.message}}
			</li>
		</ul>
		<hr />
		<!-- 2 在 v-for 里使用对象 -->
		<ul id="app2" class="demo">
			<li v-for="(value, name, index) in object">{{index}} -> {{name}} -> {{value}}</li>
		</ul>
		<hr />
		<!-- 3 维护状态 -->
		<!-- 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute -->
		<div id="app3">
			<div v-for="item in items" :key="item.id">
				{{item.value}}
			</div>
		</div>
		<hr />
		<!-- 5 显示过滤/排序后的结果 -->
		<ul id="app4">
			<li v-for="n in oddNumbers">{{n}}</li>
		</ul>
		<hr />
		<!-- 在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个方法： -->
		<div id="app5">
			<ul v-for="set in sets">
				<li v-for="n in even(set)">
					{{n}}
				</li>
			</ul>
		</div>
		<hr />
		<!-- 6 在 v-for 里使用值范围 -->
		<div id="app6">
			<span v-for="n in 10">{{n + ', '}}</span>
		</div>
		<hr />
		<!-- 7 在 <template> 上使用 v-for -->
		<ul id="app7">
			<template v-for="item in items">
				<li>{{item.msg}}</li>
				<li class="divider" role="presentation"></li>
			</template>
		</ul>
		<hr />
		<!-- 8 v-for 与 v-if 一同使用 -->
		<!--  8.1 渲染未完成的 todo -->
		<ul id="app8">
			<li v-for="todo in todos" v-if="!todo.isComplete">{{todo.content}}</li>
		</ul>
		<hr />
		<!--   8.2 如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>) 上 -->
		<template id="app9">
			<ul v-if="todos.length">
				<li v-for="todo in todos">{{todo.content}}</li>
			</ul>
		</template>
		<hr />
		<!-- 9 在组件上使用 v-for -->
		<hr />
		<hr />
		<hr />
		<hr />
		<hr />
		<hr />
		
		
		
		
		<script type="text/javascript">
			// 1 用 v-for 把一个数组对应为一组元素
			new Vue({
				el: '#app1',
				data: {
					parentMessage: 'Parent',
					items: [
						{message: 'Foo'},
						{message: 'Bar'}
					]
				}
			})
			
			// 2 在 v-for 里使用对象
			new Vue({
				el: '#app2',
				data: {
					object: {
						  title: 'How to do lists in Vue',
						  author: 'Jane Doe',
						  publishedAt: '2016-04-10'
					}
				}
			})
			// 3 维护状态
			//   为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：
			var vm3 = new Vue({
				el: '#app3',
				data: {
					items: [
						{
							id: 1001,
							value: 'item1'
						},
						{
							id: 1002,
							value: 'item2'
						},
						{
							id: 1003,
							value: 'item3'
						}
					]
				}
			})

			// 4 数组更新检测
			//   4.1 变更方法
			/* 
			Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
			push(),pop(),shift(),unshift(),splice(),sort(),reverse()
			 */
			vm3.items.push({
							id: 1004,
							value: 'item4'
						})
			//   4.2 替换数组
			//     变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，
			//     例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。
			//     当使用非变更方法时，可以用新数组替换旧数组：
			vm3.items = vm3.items.filter(function (item) {
				return item.value.match(/item2/)
			})

			//   4.3 注意事项
			//     由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。深入响应式原理中有相关的讨论。

			// 5 显示过滤/排序后的结果
			//   有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组
			new Vue({
				el: '#app4',
				data: {
					numbers: [1,2,3,4,5]
				},
				computed: {
					oddNumbers: function() {
						return this.numbers.filter(function(num) {
							return num % 2 === 1
						})
					}
				}
			})
			
			//   在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个方法：
			new Vue({
				el: '#app5',
				data: {
					sets: [[1,2,3,4,5], [6,7,8,9,10]]
				},
				methods: {
					even: function(set) {
						return set.filter(function(num) {
							return num % 2 === 0
						})
					}
				}
			})

			// 6 在 v-for 里使用值范围
			new Vue({
				el: '#app6'
			})
			// 7 在 <template> 上使用 v-for
			new Vue({
				el: '#app7',
				data: {
					items: [
						{msg: 'msg1'},
						{msg: 'msg2'},
						{msg: 'msg3'}
					]
				}
			})
			// 8 v-for 与 v-if 一同使用
			//  8.1 渲染未完成的 todo
			new Vue({
				el: '#app8',
				data: {
					todos: [
						{isComplete: true, content: 'reading'},
						{isComplete: false, content: 'walking'},
						{isComplete: false, content: 'running'}
					]
				}
			})
			//  8.2 如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>) 上
			new Vue({
				el: '#app9',
				data: {
					todos: [
						{isComplete: true, content: 'reading'},
						{isComplete: false, content: 'walking'},
						{isComplete: false, content: 'running'}
					]
				}
			})
			
			// 9 在组件上使用 v-for
			
			
		</script>
		
		
	</body>
</html>
